<template>
  <a-modal title="优惠券" :width="800" :maskClosable="false" v-model="visible" @ok="handleOk">
    <a-form :form="form">
      <a-form-item
        label="优惠券名"
        :labelCol="{lg: {span: 7}, sm: {span: 7}}"
        :wrapperCol="{lg: {span: 10}, sm: {span: 17} }"
      >
        <a-input
          v-decorator="[
            'name',
            {initialValue:coupon.name,rules: [{ required: true, message: '优惠券名' }]}
          ]"
          placeholder="输入优惠券名"
        />
      </a-form-item>

      <a-form-item
        label="类型"
        :labelCol="{lg: {span: 7}, sm: {span: 7}}"
        :wrapperCol="{lg: {span: 10}, sm: {span: 17} }"
      >
        <a-radio-group :options="couponTypeData" v-model="coupon.couponType"></a-radio-group>
      </a-form-item>

      <a-form-item
        label="库存"
        :labelCol="{lg: {span: 7}, sm: {span: 7}}"
        :wrapperCol="{lg: {span: 10}, sm: {span: 17} }"
        :required="false"
      >
        <a-input-number
          :min="0"
          :max="10000"
          v-decorator="[
                'stock',
                 {initialValue: coupon.stock},                
          ]"
        />
      </a-form-item>

      <a-form-item
        v-show="coupon.couponType == '1'"
        label="满额限制(为0不限制)"
        :labelCol="{lg: {span: 7}, sm: {span: 7}}"
        :wrapperCol="{lg: {span: 10}, sm: {span: 17} }"
        :required="false"
      >
        <a-input
          v-decorator="[
            'fullAmount',
            {initialValue:coupon.fullAmount,rules: [{ required: true, message: '请输入满额限制' }]}
          ]"
          placeholder="满额限制"
        />
      </a-form-item>

      <a-form-item
        v-if="coupon.couponType == '1'"
        label="抵扣金额"
        :labelCol="{lg: {span: 7}, sm: {span: 7}}"
        :wrapperCol="{lg: {span: 10}, sm: {span: 17} }"
        :required="false"
      >
        <a-input
          v-decorator="[
            'couponValue',
            {initialValue:coupon.couponValue,rules: [{ required: true, message: '请输入抵扣金额' }]}
          ]"
          placeholder="请输入抵扣金额"
        />
      </a-form-item>

      <a-form-item
        v-if="coupon.couponType == '2'"
        label="折扣比率（%）"
        :labelCol="{lg: {span: 7}, sm: {span: 7}}"
        :wrapperCol="{lg: {span: 10}, sm: {span: 17} }"
        :required="false"
      >
        <a-input
          v-decorator="[
            'couponValue',
            {initialValue:coupon.couponValue,rules: [{ required: true, message: '请输入折扣比率' }]}
          ]"
          placeholder="请输入折扣比率"
        />
      </a-form-item>
      <a-form-item
        v-if="coupon.couponType == '2'"
        label="折扣上限(0不限)"
        :labelCol="{lg: {span: 7}, sm: {span: 7}}"
        :wrapperCol="{lg: {span: 10}, sm: {span: 17} }"
        :required="false"
      >
        <a-input
          v-decorator="[
            'discountLimit',
            {initialValue:coupon.discountLimit,rules: [{ required: true, message: '请输入折扣上限' }]}
          ]"
          placeholder="请输入折扣上限"
        />
      </a-form-item>

      <a-form-item
        label="有效期模式"
        :labelCol="{lg: {span: 7}, sm: {span: 7}}"
        :wrapperCol="{lg: {span: 10}, sm: {span: 17} }"
      >
        <a-radio-group v-model="coupon.expireMode">
          <a-radio value="1">截止日期</a-radio>
          <a-radio value="2">有效天数</a-radio>
        </a-radio-group>
      </a-form-item>

      <a-form-item
        label="截止日期"
        :labelCol="{lg: {span: 7}, sm: {span: 7}}"
        :wrapperCol="{lg: {span: 10}, sm: {span: 17} }"
        v-if="this.coupon.expireMode === '1'"
      >
        <a-date-picker
          showTime
          format="YYYY-MM-DD HH:mm:ss"
          placeholder="截止日期"
          v-decorator="[
                'expireTime',
                {initialValue: coupon.expireTime,rules: [{ required: true, message: '请输入截止日期' }]},
              ]"
        />
      </a-form-item>

      <a-form-item
        label="有效天数"
        :labelCol="{lg: {span: 7}, sm: {span: 7}}"
        :wrapperCol="{lg: {span: 10}, sm: {span: 17} }"
        v-if="this.coupon.expireMode === '2'"
      >
        <a-input-number
          :min="0"
          :max="10000"
          v-decorator="[
                'expireDay',
                 {initialValue: coupon.expireDay},                
          ]"
        />
      </a-form-item>

      <a-form-item
        label="条件说明"
        :labelCol="{lg: {span: 7}, sm: {span: 7}}"
        :wrapperCol="{lg: {span: 10}, sm: {span: 17} }"
      >
        <a-textarea
          v-decorator="[
                'description',
                {initialValue:coupon.description,rules: [{ required: false, message: '请输入条件说明' }]}
              ]"
          placeholder="请输入条件说明"
        />
      </a-form-item>
    </a-form>
  </a-modal>
</template>
<script>
import moment from 'moment'
import { couponSave, couponUpdate } from '@/api/promotion'

export default {
  name: 'couponModal',
  data() {
    return {
      visible: false,
      couponTypeData,
      coupon: {},
      form: this.$form.createForm(this)
    }
  },
  methods: {
    handleEdit(record) {
      this.form.resetFields()
      this.coupon = Object.assign({}, record)
      this.coupon.expireTime = moment(this.coupon.expireTime)
      this.visible = true
    },
    handleCreate() {
      this.form.resetFields()
      this.coupon = {
        expireMode: '1',
        couponType: '1',
        stock: '0'
      }
      this.visible = true
    },
    // handler
    handleOk() {
      const _this = this
      this.form.validateFields((err, values) => {
        console.log('params: ', values)
        if (!err) {
          const params = { ...values }
          console.log('coupon: ', this.coupon)
          params.couponType = this.coupon.couponType
          params.expireMode = this.coupon.expireMode
          params.id = this.coupon.id
          if (!params.id) {
            couponSave(params).then(res => {
              if (res.status === 0) {
                _this.$message.success('保存成功')
                this.visible = false
                _this.$emit('ok')
              } else {
                _this.$message.success(res.msg)
              }
            })
          } else {
            couponUpdate(params).then(res => {
              if (res.status === 0) {
                _this.$message.success('保存成功')
                this.visible = false
                _this.$emit('ok')
              } else {
                _this.$message.success(res.msg)
              }
            })
          }
        }
      })
    }
  },
  created() {},
  watch: {}
}

const couponTypeData = [
  {
    value: '1',
    label: '满减券'
  },
  {
    value: '2',
    label: '折扣券'
  }
]
</script>
